<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./gwc.css">
    <link rel="stylesheet" href="./font_ram2teu78o/iconfont.css">
</head>

<body>
    <div class="big">
        <header>
            头部
        </header>

        <nav>
            <div class="top1">
                <a href="../sifulan.html">
                    <h4> S E P H O R A </h4>
                </a>
                <div class="top2">
                    <div>
                        <h6 class="iconfont">&#xe686;</h6>
                        <p>1.我的购物车</p>
                    </div>
                    <div>
                        <h6 class="iconfont">&#xe606;</h6>
                        <p>2.填写核对订单信息</p>
                    </div>
                    <div>
                        <h6 class="iconfont">&#xe6c4;</h6>
                        <p>3.成功提交订单信息</p>
                    </div>
                </div>
            </div>
        </nav>

        <section>
            <div class="center">
                <div class="box1">
                    <table border="1" cellspacing = "0" width = "1190">
                        <thead>
                            <tr>
                                <th>选中</th>
                                <th>图片</th>
                                <th>商品信息</th>
                                <th>数量</th>
                                <th>单价</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td><input type="checkbox" class="allCheck"></td>
                                <td>全选</td>
                                <td></td>
                                <td class="allNum">总数量0</td>
                                <td class="allPrice">总价:0</td>
                            
                                <td class="removeCheck">删除选中</td>
                            </tr>
                        </tfoot>
                        
                    </table>
                    <a href="http://localhost:65535/sifulan.html"><div>继续购物</div></a>
                </div>
                <div class="box2">
                    <div class="left">
                        <!-- <input type="checkbox" class="allCheck"> -->
                        <!-- <span>全选</span> -->
                        <!-- <span>批量删除 </span> -->
                        <!-- <span>|</span> -->
                        <p> <em>联系客服</em> &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
                            <em class="iconfont">&#xeb23;</em>
                        </p>
                    </div>
                    <div class="right">
                        <!-- <b>
                            <span>已选 <strong>0</strong> 件商品,合计 <strong>&yen;0</strong> </span>
                            <span>商品总额 <strong>&yen;00</strong> </span>
                        </b> -->
                        <p>立即结算</p>
                    </div>
                </div>
                <div class="box3">
                    <div class="left">热卖</div>
                    <div class="right">
                        <p class="zuo">&lt;</p>
                        <p class="you">&gt;</p>
                    </div>
                </div>
                <div class="box4">
                    <div class="box5">
                        <img src="" alt="">
                    </div>
                </div>
            </div>
        </section>
        <div class="zbig">
            <div class="one">
                <div class="two">
                    <dl>
                        <dt><img src="./masge/42355f4151150500831cea6ebdba42a_02.png" alt=""></dt>
                        <dd>顺丰EMS速达</dd>
                    </dl>
                    <span></span>
                    <dl>
                        <dt><img src="./masge/42355f4151150500831cea6ebdba42a_04.png" alt=""></dt>
                        <dd>丰富礼赠</dd>
                    </dl>
                    <span></span>
                    <dl>
                        <dt><img src="./masge/42355f4151150500831cea6ebdba42a_06.png" alt=""></dt>
                        <dd>100%正品</dd>
                    </dl>
                    <span></span>
                    <dl>
                        <dt><img src="./masge/42355f4151150500831cea6ebdba42a_08.png" alt=""></dt>
                        <dd>无障碍退款</dd>
                    </dl>
                    <span></span>
                    <dl>
                        <dt><img src="./masge/42355f4151150500831cea6ebdba42a_10.png" alt=""></dt>
                        <dd>安全支付</dd>
                    </dl>
                    <span></span>
                </div>

                <ul>
                    <li>
                        <p>购物流程</p>
                        <span>大宗采购/团购</span><br>
                        <span>丝芙兰预付卡章程</span>
                    </li>
                    <li>
                        <p>支付/配送</p>
                        <span>在线支付</span><br>
                        <span>配送时间</span>
                    </li>
                    <li>
                        <p>售后服务</p>
                        <span>退换货规定</span><br>
                        <span>退换及退款说明</span>
                    </li>
                    <li>
                        <p>关于丝芙兰</p>
                        <span>联系我们</span><br>
                        <span>品牌合作/Brand Collaboration</span><br>
                        <span>隐私政策</span>
                    </li>
                    <li>
                        <p>网上订购咨询热线:400 670 0055</p>
                    </li>
                    <div>
                        <h6></h6>
                        <h6></h6>
                        <h6></h6>
                        <h6></h6>
                    </div>
                </ul>
            </div>
        </div>
        <footer>
            尾部
        </footer>
    </div>
</body>
<script src="./gwc.js"></script>
<script src="./js/ajax.js"></script>
<script>
    class Page {
        constructor(ops) {
            this.url = ops.url;
            this.age = ops.age;
            this.cont = ops.cont;
            this.prev = ops.prev;
            this.load();

        }
        load() {
            ajax("http://localhost:65535/getGoods_", (res) => {
                this.res = JSON.parse(res).data;
                this.render();
            })
        }
        render() {
            let str = "";
            for (let i = 0; i < this.res.length; i++) {
                str += `<div class = "small">
                            <dl>
                                <dt><img src="${this.res[i].src}" alt=""></dt>
                                <dd>${this.res[i].age}</dd>
                                <dd>${this.res[i].name}</dd>
                                <dd>${this.res[i].price}</dd>
                            </dl>
                        </div>    `
            }
            this.cont.innerHTML = str;

            const obox5 = document.querySelector(".box5");
            const small = document.querySelectorAll(".box5>.small");
            const zuo = document.querySelector(".zuo");
            const you = document.querySelector(".you");


            you.onclick = function () {
                let now = parseInt(getComputedStyle(obox5).left);
                if (Math.abs(now) <= obox5.offsetWidth - small[0].offsetWidth * 10) {
                    obox5.style.left = now - small[0].offsetWidth * 5 + "px";
                }
            }
            zuo.onclick = function () {
                let now = parseInt(getComputedStyle(obox5).left)
                if (Math.abs(now) >= small[0].offsetWidth * 5) {
                    obox5.style.left = now + small[0].offsetWidth * 5 + "px";
                }
            }
        }
    }

    new Page({
        url: "",
        age: $(".age"),
        cont: $(".box5"),
        prev: $(".prev"),
    })

    const tbody = document.querySelector("tbody");

    let goods = localStorage.getItem("goods");
    goods = goods ? JSON.parse(goods) : [];

    const pArr = [];


    goods.forEach(val=>{
        // console.log(ajaxPromise)
        pArr.push(ajaxPromise("http://localhost:65535/getDetail_?id=" + val.id));
    })

    // 利用Promise的批处理，处理所有请求
    Promise.all(pArr).then(res=>{

        const arr = res.map(val=>{
            return JSON.parse(val).data;
        })

        let str = "";
        arr.forEach((val,idx)=>{
            str += `<tr myid="${val.id}">
                        <td><input type="checkbox" class="check" ${goods[idx].check ? 'checked' : ''}></td>
                        <td><img src="${val.src}"></td>
                        <td>${val.name}</td>
                        <td><input type="number" value="${goods[idx].num}" class="num"></td>
                        <td>${val.price}</td>
                        <td class="remove">删除</td>
                    </tr>`
        })
        tbody.innerHTML = str
    })



    // 修改并记录选中状态
    tbody.addEventListener("change", function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.className.includes("check")){
            const id = target.parentNode.parentNode.getAttribute("myid");
            const check = target.checked;

            let i;
            goods.some((val,idx)=>{
                i = idx;
                return val.id === id
            })

            goods[i].check = check;

            localStorage.setItem("goods", JSON.stringify(goods));

            $(".allCheck").checked = goods.every(val=>val.check);

            // 计算总数量
            $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

            // 计算总价
            $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num*val.price : 0), 0);
            // console.log($(".allPrice").innerHTML)
            
        }
    })

    // 修改并记录数量
    tbody.addEventListener("change", function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.className.includes("num")){
            const id = target.parentNode.parentNode.getAttribute("myid");
            const num = target.value-0;

            let i;
            goods.some((val,idx)=>{
                i = idx;
                return val.id === id
            })

            goods[i].num = num;

            localStorage.setItem("goods", JSON.stringify(goods));

            // 计算总数量
            $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

            // 计算总价
            $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num*val.price : 0), 0);
        }
    })

    // 删除DOM并修改数据
    tbody.addEventListener("click", function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.className.includes("remove")){
            const id = target.parentNode.getAttribute("myid");
            target.parentNode.remove();

            let i;
            goods.some((val,idx)=>{
                i = idx;
                return val.id === id
            })

            goods.splice(i, 1);

            localStorage.setItem("goods", JSON.stringify(goods));

            $(".allCheck").checked = goods.every(val=>val.check);

            // 计算总数量
            $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

            // 计算总价
            $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num*val.price : 0), 0);
        }
    })

    // 如果所有商品都被选中了，全选默认选中
    $(".allCheck").checked = goods.every(val=>val.check);

    // 全选按钮影响单个商品的选中
    $(".allCheck").onclick = function(){
        const all = document.querySelectorAll(".check");
        [...all].forEach(val=>{
            val.checked = this.checked;
        })
        goods.forEach(val=>{
            val.check = this.checked;
        })
        localStorage.setItem("goods", JSON.stringify(goods));

        // 计算总数量
        $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

        // 计算总价
        $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num*val.price : 0), 0);
    }

    // 计算总数量
    $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);
    console.log( $(".allNum").innerHTML)


    // 计算总价
    $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num*val.price : 0), 0);

    console.log($(".allPrice").innerHTML)


    // 删除选中
    $(".removeCheck").onclick = function(){
        goods = goods.filter(val=>!val.check);

        const all = document.querySelectorAll(".check");
        [...all].forEach(val=>{
            if(val.checked){
                val.parentNode.parentNode.remove();
            }
        })

        localStorage.setItem("goods", JSON.stringify(goods));

        // 计算总数量
        $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

        // 计算总价
        $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num*val.price : 0), 0);
    }


    function $(select) {
        return document.querySelector(select);
    }
    function $(s){
        return document.querySelector(s);
    }   
</script>

</html>